<template>
  <div class="device">
    <div class="tab_control_box" v-show="subPage == 0">
      <el-tabs v-model="activeName" type="card" @tab-click="getListInfo(true)">
        <el-tab-pane label="出入记录" name="1">
          <CarComeOutRecord ref="CarComeOutRecord" />
        </el-tab-pane>
        <el-tab-pane label="车辆列表" name="2">
          <CarRunList ref="CarRunListRef" @modifCar="addCarInfo" />
        </el-tab-pane>
        <el-tab-pane label="车辆识别设备" name="3">
          <DeviceCar ref="DeviceCarRef" @showDailog="addDeviceInfo" />
        </el-tab-pane>
      </el-tabs>

      <div class="button_box">
        <el-row>
          <el-button type="text" icon="el-icon-refresh" plain @click="getListInfo(true)">刷新</el-button>
          <el-button type="text" icon="el-icon-download" plain v-show="activeName == 2" @click="dialogFormVisible=false">导入</el-button>
          <el-button type="text" icon="el-icon-upload2" plain v-show="activeName == 2" @click="exportFile">导出</el-button>
          <el-button type="text" icon="el-icon-plus" plain v-show="activeName == 2" @click="addCarInfo">添加车辆</el-button>
          <el-button type="text" icon="el-icon-plus" plain v-show="activeName == 3" @click="addDeviceInfo">添加设备</el-button>
        </el-row>
      </div>
    </div>

    <AddDeviceInfoModel ref="AddDeviceInfoModelRef" />
    <AddCarInfoModel ref="AddCarInfoModelRef" v-show="subPage == 2" />

    <el-dialog title="导入车辆信息" width="600px" :visible.sync="dialogFormVisible">
      <el-upload
        class="upload-demo"
        drag
        :action="actionInfo"
        multiple
        :limit="1"
        accept=".xlsx, .xls"
        :file-list="fileList"
        :on-success="handleAvatarSuccess"
        :on-change="handleChange">
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>

        <div class="el-upload__tip" slot="tip">
          <div>
            <el-popover
              placement="right"
              width="520"
              trigger="hover">
              <div style="display: flex; flex-direction: column; line-height: 24px; font-size: 12px; color: #7a7a7a;">
                <span>• 使用EXCEL编辑导入文件时，请将单元格的格式修改为文本格式，避免数字文本自动转换为科学计数文本。</span>
                <span>车辆信息：</span>
                <span>1、车牌号码：必填，1~16个字符；不能包含 ' / \ : * ? " <> | 这些特殊字符；</span>
                <span>2、车牌类型：九种类型供选择：标准民用车与军车/02式民用车/武警车/警车/民用车双行尾牌/使馆车/农用车/摩托车/新能源车。</span>
                <span>3、车辆颜色：十三种类型供选择：白色/银色/灰色/黑色/红色/深蓝/蓝色/黄色/绿色/棕色/粉色/紫色/其他颜色。</span>
                <span>4、车牌颜色：七种类型供选择：蓝色/黄色/白色/黑色/绿色/民航黑色/其他颜色。</span>
                <span>5、车辆类型：四种类型供选择：小型车/大型车/其他车/摩托车。</span>
              </div>
              <span slot="reference" class="text text-hover">字段说明</span>
            </el-popover>
<!--            <span class="text text-hover" @click="downloadFile">下载文件模板</span>-->
            <span>只能上传 .xlsx/.xls 文件，且不超过 3M。</span>
          </div>
        </div>
      </el-upload>
    </el-dialog>
  </div>
</template>

<script>
import CarRunList from "./car-run/CarRunList";
import CarComeOutRecord from "./car-run/CarComeOutRecord";
import DeviceCar from "./car-run/DeviceCar";
import AddCarInfoModel from "../models/AddCarInfoModel";
import AddDeviceInfoModel from "./car-run/module/AddDeviceInfoModel";
import { mapActions } from "vuex";
import HttpInterface from "../../util/httpInterface";

export default {
  name: "CarRun",
  components: {
    CarRunList, CarComeOutRecord, AddCarInfoModel, DeviceCar, AddDeviceInfoModel
  },
  data() {
    return {
      activeName: '1',
      subPage: 0,
      id: 0,
      dialogFormVisible: false,
      actionInfo: "",
      fileList: [],
    };
  },

  mounted() {
    HttpInterface.getUserInfo(() => {
      this.getListInfo();
      this.getTendersInfo();
      this.getWorkAreaInfo();
      this.$refs.DeviceCarRef.getDeviceList();
    })
  },

  methods: {
    ...mapActions(["getTendersInfo", "getWorkAreaInfo"]),

    downloadFile() {

    },

    handleChange(file) {
      console.log(file)
      this.fileList = [];
      this.fileList.push({
        url: URL.createObjectURL(file.raw),
        name: file.name
      })
    },

    handleAvatarSuccess(res, file) {
      console.log(res, file)
    },

    exportFile() {

    },

    // 添加设备
    addDeviceInfo (id) {
      if (typeof(id) == "number") {
        this.$refs.AddDeviceInfoModelRef.show(id);
      } else {
        this.$refs.AddDeviceInfoModelRef.show();
      }
    },

    // 添加车辆信息
    addCarInfo (row) {
      this.subPage = 2;
      if (row.id) {
        this.$refs.AddCarInfoModelRef.show(row);
      } else {
        this.$refs.AddCarInfoModelRef.show();
      }
    },

    // 刷新数据
    getListInfo (data) {
      switch(this.activeName) {
        case '1':
          data && this.$refs.CarComeOutRecord.getDeviceInfo(this.$refs.CarComeOutRecord.formInfo);
          break;
        case '2':
          data && this.$refs.CarRunListRef.getDeviceInfo(this.$refs.CarRunListRef.formInfo);
          break;
        case '3':
          this.$refs.DeviceCarRef.getDeviceList();
          break;
      }
    }
  }
};
</script>

<style scoped lang="scss">
.upload-demo{
  margin-bottom: 40px;
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;

  .el-upload__tip{
    width: 360px;
    margin-top: 10px;

    .text{
      color: #409EFF;
      cursor: pointer;
      margin-right: 8px;
    }

    .text-hover {
      transition: all 0.3s;

      &:hover {
        color: #6db2fd;
      }

      &:active{
        color: #1b84f1;
      }
    }
  }
}

.upload-demo >>> .el-upload-list {
  width: 360px;
}
</style>
